<template>
    <div class="personal">
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="16">
                <el-card class="personal-info">
                    <div slot="header" class="clearfix">
                        <span>个人资料</span>
                    </div>
                    <el-row>
                        <el-col :span="4">
                            头像
                        </el-col>
                        <el-col :span="12">
                            <el-upload
                                    :multiple="false"
                                    :limit="1"
                                    action="#"
                                    :auto-upload="false">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    {{file.url}}
                                    <img class="el-upload-list__item-thumbnail"
                                         :src="file.url">
                                    <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview"
                                          @click="handlePictureCardPreview(file)">
                                      <i class="el-icon-zoom-in"></i>
                                    </span>
                                  </span>
                                </div>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-col>
                        <el-col :span="4">11</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            用户名
                        </el-col>
                        <el-col :span="12">
                            11
                        </el-col>
                        <el-col :span="4">
                            11
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            用户名
                        </el-col>
                        <el-col :span="12">
                            11
                        </el-col>
                        <el-col :span="4">
                            11
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import MenuUtil from "../../utils/MenuUtil";
    import {mapDict} from "../../api/manage/dict";
    import DictUtils from "../../utils/DictUtils";
    import {listUserMenuTreeBySystem} from "../../api/manage/menu";

    export default {
        name: "Personal",
        components: {},
        data() {
            return {
                activeIndex: "",
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false
            }
        },
        methods: {
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            mapDict() {
                mapDict().then(result => {
                    DictUtils.setDict(this, "manage", result.data.dictMap)
                })
            },
            listUserMenuTreeBySystem(activeSystem) {
                listUserMenuTreeBySystem(activeSystem).then(result => {
                    this.menuList = result.data.menuTree
                    this.activeIndex = MenuUtil.activeMenu(this.$route.path, 2)
                })
            }
        },
        created() {
            this.listUserMenuTreeBySystem(this.$store.state.Pabu.activeSystem)
            this.mapDict()
        },
        computed: {
            activeSystem() {
                return this.$store.state.Pabu.activeSystem
            }
        },
        watch: {
            activeSystem(newVal, oldVal) {
                this.listUserMenuTreeBySystem(newVal)
            }
        },
    }
</script>

<style>
    .personal {
        margin-top: 5px;
        width: 100%;
        height: 100%;
        border-bottom: #cccccc 1px solid;
    }

    .personal-info {
        width: 100%;
        min-height: 500px;
    }

    .avatar {
        width: 50px;
        height: 50px;
    }

</style>
